<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="s" uri="http://www.springframework.org/tags"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@ taglib prefix="sf" uri="http://www.springframework.org/tags/form"%>
<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->
<head>
<jsp:include page="../include/head.jsp" />
</head>
<body>
	<c:set var="page" value="learningjourney" scope="request" />
	<jsp:include page="../include/header.jsp" />
	<div class="row" style="color: black;">
		<div class="maincontainer">
			<div class="container2" style="padding-top: 1px;">

				<h2 style="color: #D71A5E;">About Learning Journey</h2>
				<p>Embark on exciting learning journeys and discover educational
					resources available through various agencies. You will have the
					opportunity to engage in interesting activities and bring them back
					to your classrooms. Please take note of the following:</p>
				<p>
					(1) all participants are to assemble at Learning Journey venue <u>20
						minutes</u> before the start of the programme,
				</p>
				<p>(2) transport will not be provided to venues,</p>
				<p>(3) refreshments will not be provided during the Learning
					Journeys, and</p>
				<p>(4) participants are advised to dress comfortably.&nbsp;</p>
				<p style="color: #D71A5E;">*Click on the respective arrows to
					view details.</p>
				<c:forEach items="${learningJourneyList}" var="lj"
					varStatus="ljStatus">
					<div class="row">
						<a name="${lj.id}" />

						<div class="panel-group" id="accordion">
							<div class="panel panel-default" style="border: 0px;">
								<div class="panel-heading" style="background-color: white;">
									<h4 class="panel-title">
										<a class="accordion-toggle" data-toggle="collapse"
											data-parent="#accordion" href="#${lj.id}">
											<table border="0" cellspacing="0" cellpadding="0">
												<tr>
													<td width="20px"><img src="img/right-arrow.png"></td>
													<td style="color: #D71A5E;"><c:out value="${lj.name}" /></td>
												</tr>
											</table> <sf:errors path="${lj.id}" cssClass="error" />
										</a>
									</h4>
								</div>
								<div id=${lj.id } class="panel-collapse collapse"
									style="background-color: white;">
									<div class="panel-body" style="border: 0px;">
										<table border="0" cellspacing="0" cellpadding="0">
											<tr>
												<td width="20px"></td>
												<td><p>
														<span style="color: #D71A5E">Date:</span>
														<fmt:formatDate value="${lj.journeyDate}" dateStyle="long" />
													</p>
													<p>
														<span style="color: #D71A5E">Time:</span>
														<c:out value="${lj.duration}" />
													</p>
													<p>
														<span style="color: #D71A5E">Venue:</span>
														<c:out value="${lj.venue}" />
													</p>
													<p>
														<span style="color: #D71A5E">Price:</span>
														<fmt:formatNumber value="${lj.cost}" type="currency" currencySymbol="S$"/>
														per pax
													</p>
													<p>
														<span style="color: #D71A5E">Synopsis:</span>
														<c:out value="${lj.description}" escapeXml="false" />
													</p></td>
											</tr>
										</table>

									</div>
								</div>
							</div>

						</div>
					</div>
				</c:forEach>
			<br><br>
		</div>
	</div>
	<jsp:include page="../include/bottombody.jsp" />
</body>
</html>